<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS常用伪类别属性</title>
<style>
/*
#d1{width:200px; font-family:Arial Black; border:2px solid red;}
#d1 ul{
	list-style-type:none; border:2px dashed blue;		利用选择器的嵌套将列表圆点去掉
	padding:0;											padding设置内容与单元框间距
}
#d1 ul li{border-bottom:1px solid #0F0;}

#d1 ul li a{
	text-decoration:none;								去掉默认下超链接的下划线
	display:block;			因为链接属于行级标签，当需要设置高度时，需要先将其设置成块级标签block才能实现（同理，当块级标签需要设置成行级标签时，则为display:inline;）
	width:500px; height:25px;
	border-left:5px solid #CCC;
	border-right:2px solid #FF0;
}
下面正式介绍伪类别，上述样式可以去掉注释看看效果。
*/
#d1 ul li a:link,#d1 ul li a:visited{		/*是否可以直接写为：d1 ul li a:link,visited     ？？？？？？   */
	background-color:red;					/*设置超链接本身、被点击后的背景色      (因为背景色的原因，需要先将链接设置为块级标签   是吗？？？？？  感觉太短了)*/
	color:white;
}
#d1 ul li a:hover{
	background-color:#550055;					/*设置当鼠标移到超链接时的背景色和字体颜色*/
	color:#223399;
	}
#d1 ul li a:active{
	background-color:#334444;					/*设置当鼠标点击超链接不放的情况下，超链接的背景色和字体颜色*/
	color:#557766;
	}
</style>
</head>
<div id="d1">
	<ul>
    	<li><a href="#">主页</a></li>
        <li><a href="#">说说</a></li>
        <li><a href="#">日志</a></li>
        <li><a href="#">相册</a></li>
        <li><a href="#">访客</a></li>
    </ul>
</div>

<body>
</body>
</html>
